<template>
  <div class="taskContainer">
    <div class="oneTable">
      <el-table
        :data="statisticsDataSource"
        border
        :cell-style="tableCellStyle"
        :header-cell-style="{
          height: '20px',
          padding: '7px',
        }"
        :row-style="{ height: '0' }"
        style="width: 100%"
      >
        <el-table-column prop="missionTime" label="时间"> </el-table-column>
        <el-table-column prop="missionTotal" label="任务总数">
        </el-table-column>
        <el-table-column prop="compNum" label="完成数量"> </el-table-column>
        <el-table-column prop="unCompNum" label="未完成数量"> </el-table-column>
        <el-table-column prop="compRate" label="完成率"> </el-table-column>
        <el-table-column prop="missionScore" label="评分"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div @click="goToMissionList(scope.row)" style="color: #48ddff">
              任务明细
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="towTable">
      <div class="tableTitle">任务明细</div>
      <el-table :data="tableData2" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="200">
        </el-table-column>
        <el-table-column prop="name" label="任务名称" :width="$px2rem('120px')">
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="状态"
          :width="$px2rem('120px')"
        >
          <template slot-scope="scope">
            <span
              :style="{
                color:
                  scope.row.status == 2
                    ? '#F4B815'
                    : scope.row.status == 1
                    ? '#48DDFF'
                    : scope.row.status == 4
                    ? '#ffffff'
                    : scope.row.status == 5
                    ? '#ffffff'
                    : '#F41515',
              }"
            >
              {{ scope.row.status | taskStatus(typeData) }}{{delayText(scope.row)}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="director_dictText" label="负责人" align="center">
        </el-table-column>
        <el-table-column label="参与人" align="center">
          <template slot-scope="scope">
            {{ participation(scope.row.cooperationInfo) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="missionDateEd"
          label="预计完成时间"
          align="center"
        >
          <!--          <template slot-scope="scope">-->
          <!--              {{overTime(scope.row)}}-->
          <!--          </template>-->
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="page.total"
          popper-class="select_bottom"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { suoTaskList } from "@/api/dashborad";
import { getMounthOfWeekList } from "@/utils/time";
import { getDictItemListByCode } from "@/api/system";
export default {
  name: "taskList",
  components: {},
  props: ["id"],
  filters: {
    taskStatus(jd, typeData) {
      let obj = typeData.find((item) => item.value == jd);
      if (obj) return obj.label;
      return "--";
    },
  },
  computed: {},
  data() {
    return {
      typeData: [],
      statisticsDataSource: [],
      queryMonthSt: this.$store.state.timeChange.createTimeSt,
      queryMonthEd: this.$store.state.timeChange.createTimeEd,
      tableData2: [],
      page: {
        total: 0,
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {},
  created() {
    this.suoTaskList();
    this.taskStatusDefective("internal_mission_status");
  },
  methods: {
    // 获取字典值-项目进度类型
    async taskStatusDefective(dictCode) {
      const res = await getDictItemListByCode({ dictCode });
      this.typeData = (res.result || []).map((x) => {
        return {
          label: x.itemText,
          value: x.itemValue,
        };
      });
    },
    // 参与人
    participation(text) {
      if (text) {
        return JSON.parse(text)
          .map((item) => item.realname)
          .join(",");
      } else {
        return "";
      }
    },
    // 逾期时间
    delayText({ missionDateEd, year, month, week }) {
      const weekList = getMounthOfWeekList(year, month)
      const weekEndDay = weekList.find(item => item.value === week).weekEndDate
      const delayDay = new Date(weekEndDay).format('d') - new Date(missionDateEd).format('d')
      // console.log('missionDateEd', missionDateEd)
      // console.log('weekEndDay', weekEndDay)
      return delayDay ? `${delayDay}天` : ''
    },
    // 任务时间
    overTime(r) {
      const { year, month, week, missionDateSt, missionDateEd } = r;
      return (
        year +
        "年" +
        month +
        "月 " +
        "第" +
        week +
        "周 " +
        new Date(missionDateSt).format("MM.dd") +
        "~" +
        new Date(missionDateEd).format("MM.dd")
      );
    },
    // 修改 table cell边框的背景色
    tableCellStyle() {
      return "padding: 7px";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      // this.getSuoProjectList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pageNo = val;
      // this.getSuoProjectList()
    },
    dataSource(dataSource) {
      // const { year, month, year_begin, month_begin, year_end, month_end } = this.queryParam
      let year_end = +this.queryMonthEd.split("-")[0];
      let month_end = +this.queryMonthEd.split("-")[1];
      let year_begin = +this.queryMonthSt.split("-")[0];
      let month_begin = +this.queryMonthSt.split("-")[1];
      const belongDpt = this.id;
      let weekList = [];
      if (month_begin === month_end) {
        weekList = getMounthOfWeekList(year_begin, month_begin);
      } else {
        const endYM = new Date(year_end, month_end - 1);
        let curY = year_begin;
        let curM = month_begin;
        let curYM = new Date(curY, curM);
        while (curYM <= endYM) {
          weekList.push(...getMounthOfWeekList(curY, curM));
          curM++;
          curYM = new Date(curY, curM - 1);
          // console.log(curYM);
        }
      }
      // console.log("weekList", weekList);
      // console.log(weekList, dataSource);
      this.statisticsDataSource = weekList.map((weekItem) => {
        const { year, month, week } = weekItem;
        const weekMissionList = dataSource.filter(
          (item) =>
            item.year === year && item.month === month && item.week === week
        );
        const compMissionList = weekMissionList.filter(
          (item) => item.status === 4
        );
        const missionTotal = weekMissionList.length || 0;
        const compNum = compMissionList.length || 0;
        const missionScore =
          weekMissionList.reduce((p, c) => p + (c.score || 0), 0) /
          missionTotal;
        const missionTime = year + "年" + month + "月 " + "第" + week + "周 ";
        return {
          ...weekItem,
          missionTotal: missionTotal || null,
          compNum: compNum || null,
          unCompNum: missionTotal - compNum || null,
          compRate: missionTotal
            ? (compNum / missionTotal).toFixed(2) * 100 + "%"
            : null,
          missionScore: missionScore || null,
          missionTime,
          year,
          month,
          week,
          belongDpt,
        };
      });
      this.$forceUpdate();
    },
    // 所列表
    async suoTaskList() {
      if (!this.id) {
        return;
      }
      const params = {
        pageNo: 1,
        pageSize: 1000,
        belongDpt: this.id,
        year_end: +this.queryMonthEd.split("-")[0],
        year_begin: +this.queryMonthSt.split("-")[0],
        month_end: +this.queryMonthEd.split("-")[1],
        month_begin: +this.queryMonthSt.split("-")[1],
      };
      const res = await suoTaskList(params);
      if (res.success) {
        // console.log(res);
        const suoTaskList = res.result.records || res.result;
        this.dataSource(suoTaskList);

      } else {
        this.$message.warning(res.message);
      }
    },
    async goToMissionList(record) {
      const { year, month, week, belongDpt } = record;
      const res = await suoTaskList({
        pageNo: 1,
        pageSize: 1000,
        belongDpt: belongDpt,
        week: week,
        year: year,
        month: month,
      });
      this.tableData2 = res.result.records;
      this.page.total = res.result.total;
    },
  },
  destroyed() {
    // clearInterval(this.timer)
  },
};
</script>
<style scoped lang="scss">
.taskContainer {
  font-size: 14px;
  .grade {
    margin-top: -5px;
    color: #ffffff;
    margin-bottom: 15px;
    span {
      font-size: 20px;
      font-weight: bold;
      color: #f4b815;
    }
  }
  .pagination {
    float: right;
    margin: 12px 0;
  }
  .oneTable {
    ::v-deep .el-table__body-wrapper {
      height: 185px !important;
      overflow-y: scroll;
      border: 0;
    }
    .el-table {
      //border-bottom: 1px solid #23C1FF;
      border-right: 1px solid #23c1ff;
      margin: 0 auto;
      color: #ffffff;
    }
    ::v-deep .el-table--border,
    .el-table--group {
      border-left: 0;
      border-top: 0;
    }
    //去掉底部和右边的白色下划线
    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
      background-color: transparent;
    }
    ::v-deep .el-table th {
      background: #00415b;
      border: 1px solid #23c1ff !important;
      border-right: none !important;
      //border-bottom: none !important;
      height: 30px;
    }

    ::v-deep.el-table td {
      border-bottom: 1px solid #23c1ff;
      border-left: 1px solid #23c1ff;
      border-right: none !important;
      font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
      font-weight: Normal;
    }
    ::v-deep .el-table tr,
    ::v-deep .el-table td {
      background-color: transparent; // 背景透明
      color: #fff; // 修改字体颜色
      //font-size: 24px;
      //height: 5px;
    }
  }
  .towTable {
    .tableTitle {
      color: #48ddff;
      font-size: 18px;
      height: 35px;
      padding-left: 24px;
      line-height: 38px;
      //background-color: #022537;
      margin-bottom: 3px;
      margin-top: 18px;
      //border-top: 1px solid #147582;
      background: url("../../../assets/dashboard/middle/project_list.png")
        no-repeat;
      background-size: 100% 100%;
    }
    ::v-deep .el-table__body-wrapper {
      height: 195px !important;
      overflow-y: scroll;
    }

    ::v-deep .el-table__header {
      //height: 60px;
    }
    // 表格内背景颜色
    ::v-deep .el-table th {
      background-color: #001c32 !important;
      border: 0px;
    }
    //去除表头的下标线；
    ::v-deep .el-table th.is-leaf {
      border-bottom: none;
    }
    // 表格内背景颜色
    ::v-deep .el-table tr,
    ::v-deep .el-table td {
      background-color: #033247; // 背景透明
      border: 0px;
      color: #fff; // 修改字体颜色
      //font-size: 24px;
      //height: 5px;
      font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
      font-weight: Normal;
    }

    ::v-deep
      .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell {
      background-color: #001c32;
    }
    ::v-deep .el-table th.el-table__cell > .cell {
      padding-left: 25px;
    }
    ::v-deep .el-table .cell {
      padding-left: 25px;
    }
    .el-table::before {
      background-color: transparent !important;
    }
    ::v-deep .el-table {
      box-shadow: inset 0px 1px 21px 0px rgba(35, 193, 255, 0.2);
      border: 1px solid rgba(35, 193, 255, 0.5);
    }

    ::v-deep .el-table tbody tr:hover > td {
      background-color: #03638d !important;
      //color: #0ef2ec;
    }
  }
}
</style>
